import React, { Component } from "react";

class App extends Component {
  state = {
    textVlaue: "",
    areaValue: "",
    selectValue: "",
    checked: false,
  };

  handleChange1 = (e) => {
    this.setState({
      textVlaue: e.target.value,
    });
  };
  handleChange2 = (e) => {
    this.setState({
      areaValue: e.target.value,
    });
  };
  handleChange3 = (e) => {
    this.setState({
      selectValue: e.target.value,
    });
  };
  handleChange4 = (e) => {
    this.setState({
      checked: e.target.checked,
    });
  };

  handleClick = () => {
    console.log("textVlaue:" + this.state.textVlaue);
    console.log("areaValue:" + this.state.areaValue);
    console.log("selectValue:" + this.state.selectValue);
    console.log("checked:" + this.state.checked);
  };

  render() {
    return (
      <>
        <h2>form表单</h2>
        <input
          type="text"
          value={this.state.textVlaue}
          onChange={this.handleChange1}
        />
        <hr />
        <textarea
          value={this.state.areaValue}
          onChange={this.handleChange2}
        ></textarea>
        <hr />
        <select value={this.state.selectValue} onChange={this.handleChange3}>
          <option value="" disabled>
            -- 请选择 --
          </option>
          <option value="1">男</option>
          <option value="2">女</option>
          <option value="0">未知</option>
        </select>
        <hr />
        我已阅读{" "}
        <input
          type="checkbox"
          checked={this.state.checked}
          onChange={this.handleChange4}
        />
        <hr />
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
